<template>
  <div style="margin: 50px">
    <el-container>
      <el-header>
        <!-- <topBarA/>
        <manage_menu/> -->
      </el-header>
      <el-main>
        <el-card v-for="(item,index) in work_sheet_form_list" :key="index" class="box-card">
            <template #header>
              <div class="card-header">
                <span>{{ item.status }}</span>
                <el-button class="button" @click="toDetails(item)">详情</el-button>
              </div>
            </template>
              <div style="height: 200px">
                <p>产线信息：{{ item.product_line }}</p>
                <p>设备名称：{{ item.device_name }}</p>
                <p>设备地址：{{ item.device_location }}</p>
                <p>维护任务描述：{{ item.task_detail }}</p>
                <p>工单号：{{ item.id }}</p>
              </div>
            <!-- <template #footer>Footer content</template> -->
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
  import { onBeforeMount, reactive, ref} from 'vue'
  import axios from 'axios'
  import { useRouter } from 'vue-router'
  
  //数据域
  const state = reactive({});//复杂的响应式数据
  const api_data = ref([]);//定义基本数据或简单对象响应式数据
  const format_data = ref([]);
  const router = useRouter();
  const work_sheet_form_list = ref([]);

  //  网络请求相关对象
  const API = axios.create({
    baseURL:'http://10.112.16.136:8018/cloudForm',
    headers:{
      'Content-Type': 'application/x-www-form-urlencoded',
    }
  })

  //这里应该传入自己写的数据库的数据（主要用uid）
  let global_info = {
   uid:'100291',
   account:'222', 
   type:'工长'
  }
  // let global_info = {
  //  uid:'100290',
  //  account:'111', 
  //  type:'主管'
  // }
  
  //钩子函数
  onBeforeMount(async() => {
    if (global_info.type === '主管'){
      getAllFormIdByUid('2021210029');
      //console.log('我是主管');
    }
    else{
      getAllFormIdByUid(global_info.uid);
      //console.log('我不是主管');
    }
    //console.log(work_sheet_form_list.value)
    //async函数执行后返回Promise对象,其代表一个异步操作(函数执行完，拿到数据，才解除等待)
  })

  //方法区
  //  获取uid下的所有表单
  function getAllFormIdByUid(uid){
    let cur_url = "/getAllFormByUid/" + uid
    console.log('获取所有表单')
    API({
      url:cur_url,
      method:'get',
    }).then((res)=>{
      let id_list = res.data.data;
      //console.log(res);
      for(let i=0; i<id_list.length; i++) {
        //let cur_record_id = id_list[i]['id']    //记录表单id的表单，非工单id
        let work_sheet_id = id_list[i]['form']['id']  //该员工相关工单id
        getFormById(work_sheet_id)
      }
    })}

  //  根据ID获取表单
  function getFormById(formId){
    let cur_url = "/getFormById/" + formId
    API({
      url:cur_url,
      method:"GET"
    }).then((res)=>{
      //work_sheet_form_list.value.push(res.data.data.form)
      if(res.data.data.form.status==='已完成'){
          work_sheet_form_list.value.push(res.data.data.form)
      }
    })
  }
  
  //点击按钮，跳转详情页面
  function toDetails(item){
    console.log(item.form);
    router.push({
      path: '/details',
      //query: item.form
      //这里传参不会写
    })
  }

</script>

<style lang="scss" scoped>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.text {
font-size: 14px;
}

.item {
margin-bottom: 0px;
margin-top: 10px;
}

.box-card {
width: 480px;
}
</style>